<template>
  <div class="account">
    <div class="account_1" v-if="accountstatus == 1">
      <div class="label">{{languageJson.setting.password}}</div>
      <div class="button" @click="clickmodify()">{{languageJson.setting.updataPassword}}</div>
    </div>
    <div class="account_2" v-if="accountstatus == 2">
      <div class="account_title">{{languageJson.setting.updataPassword}}</div>
      <div class="account_form_password">
        <el-form :model="formdata" label-width="auto" ref="ruleFormRef" :rules="rules">
          <el-form-item :label="`${languageJson.setting.oldPassword}:`" prop="pass_word_old">
            <el-input v-model="formdata.pass_word_old" style="width: 300px" :placeholder="`${languageJson.message.enterOldPassword}`" />
          </el-form-item>
          <el-form-item :label="`${languageJson.setting.newPassword}:`" prop="pass_word_a">
            <el-input v-model="formdata.pass_word_a" style="width: 300px" :placeholder="`${languageJson.message.enterNewPassword}`"/>
          </el-form-item>
          <el-form-item :label="`${languageJson.setting.enterAgain}:`" prop="pass_word_b">
            <el-input v-model="formdata.pass_word_b" style="width: 300px" :placeholder="`${languageJson.message.enterNewPasswordAgain}`" />
          </el-form-item>
        </el-form>
      </div>
      <div class="account_buttons">
        <div class="item close" @click="clickclose()">{{languageJson.home.cancel}}</div>
        <div class="item submit" @click="clicksubmit(ruleFormRef)">{{languageJson.setting.confirmChanges}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import http from '@/utils/uc-http'
import { settingStore } from '@/stores/setting.js'
import { ElMessage, ElLoading } from 'element-plus'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const { settingtore, state } = inject('SettingStore')
const accountstatus = ref(1)
const settingStores = settingStore()
const userStore = useUserStore()
const formdata = ref({
  plant_code: `${userStore.packageJs.plantcode}=${userStore.packageJs.plantcode2}`,
  uid: userStore.user.uid,
  pass_word_old: '',
  pass_word_a: '',
  pass_word_b: '',
})
const ruleFormRef = ref()

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error(languageJson.value.message.enterNewPasswordAgain))
  } else if (value !== formdata.value.pass_word_a) {
    callback(new Error(languageJson.value.message.passworAtypism))
  } else {
    callback()
  }
}
const rules = reactive({
  pass_word_old: [{ required: true, message: languageJson.value.message.enterOldPassword, trigger: 'blur' }],
  pass_word_a: [{ required: true, message: languageJson.value.message.enterNewPassword, trigger: 'blur' }],
  pass_word_b: [{ validator: validatePass2, trigger: 'blur' }],
})
const clickmodify = () => {
  accountstatus.value = 2
  formdata.value = {
    plant_code: '',
    uid: '',
    pass_word_old: '',
    pass_word_a: '',
    pass_word_b: '',
  }
}

const clickclose = () => {
  accountstatus.value = 1
  formdata.value = {
    plant_code: '',
    uid: '',
    pass_word_old: '',
    pass_word_a: '',
    pass_word_b: '',
  }
}

const clicksubmit = ruleFormRef => {
  ruleFormRef.validate(valid => {
    if (valid) {
      let body = JSON.parse(JSON.stringify(formdata.value))
      http.post('/uc_set_password', body).then(res => {
        let langMsg = localStorage.getItem(`sp_language`) == 'zh' ? res.msg_lang.text_zh : res.msg_lang.text_en
        ElMessage({
          message: langMsg,
          type: 'success',
        })

        setTimeout(() => {
          userStore.logout()
          settingStores.showdialog = false
          window.location.reload();
        }, 500)
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.account {
  width: 100%;
  height: 100%;
}
.account_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .label {
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    font-weight: 500;
    color: #000;
  }

  .button {
    cursor: pointer;
    height: 32px;
    padding: 0 36px;
    background-color: #f4f5fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_55_;
    font-size: 14px;
    color: #ff5f58;
  }
}

.account_2 {
  display: flex;
  flex-direction: column;

  .account_title {
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin-bottom: 24px;
  }

  .account_form_password {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
  }

  .account_buttons {
    display: flex;
    padding-left: 104px;

    .item {
      width: 120px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .close {
      background-color: #f3f5fd;
      margin-right: 12px;
      font-family: AlibabaPuHuiTi_2_55_;
      font-size: 14px;
      color: #000;
    }
    .submit {
      background-color: #3711d8;
      font-family: AlibabaPuHuiTi_2_55_;
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>

<style>
.account_form_password .el-form-item__label {
  font-family: AlibabaPuHuiTi_2_55_;
  font-size: 14px;
  color: #000;
}
</style>